<template>

    <!--筛选条件-->
    <div class="shaixuan3">
        <div style="margin-top: 15px;">
            <el-input placeholder="搜索关键词" v-model="input" class="input-with-select" style="width: 400px;" size="mini">
                <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
            </el-input>
            <el-select v-model="state" placeholder="订单状态" @change="statechange" style="margin-left: 10px;" size="mini">
                <el-option
                    v-for="item in states"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <el-button style="margin-left: 20px;"  size="mini"  @click="resetForm('search')">重置</el-button>
            <vue-json-excel
                style="display: inline;margin-left: 10px;"
                :data="tableData1"
                :fields="excelFields"
                name="导出订单.xlsx"
                type="xlsx"
            >
                <el-button size="mini">导出</el-button>
            </vue-json-excel>
        </div>
        <div class="first_table">
            <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all v-loading="loading" >
                <el-table-column align="center" fixed  width="55" label="序号"  prop="id"></el-table-column>
                <el-table-column header-align="center" align="center" prop="coursename" label="课程信息"></el-table-column>
                <el-table-column header-align="center" align="center" prop="fee" label="付款金额（元）"></el-table-column>
                <el-table-column header-align="center" align="center" prop="create_time" label="下单时间"></el-table-column>
                <el-table-column header-align="center" align="center" prop="pay_time" label="付款时间"></el-table-column>
                <el-table-column header-align="center" align="center" prop="order_num" label="订单号"></el-table-column>
                <el-table-column header-align="center" align="center" prop="statename" label="订单状态">
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>


<script>
    import VueJsonExcel from "vue-json-excel";



    import {getpayorder} from '@/api/live/action';

    export default {
        components: {VueJsonExcel},
     
        data(){
            return {
                pageSize: 10, //一页显示多少条
                pageNumber: 1,
                total: 0, //总页数
                input:'',
                loading: false,
                state:'',
                tableData:[],
                tableData1:[],
                states: [
                    {
                    value: '',
                    label: '订单状态'
                    },{
                    value: '0',
                    label: '提单未付款'
                    }, {
                    value: '1',
                    label: '下单'
                    }, {
                    value: '2',
                    label: '退款审核中'
                    }, {
                    value: '3',
                    label: '已退款'
                    },  {
                    value: '4',
                    label: '退款失败'
                    }, {
                    value: '5',
                    label: '已失效'
                    }
                ],
                excelFields: {
                    "序号": "id",
                    "课程信息": "coursename",
                    "付款金额（元）": "fee",
                    "下单时间": "create_time",
                    "付款时间": "pay_time",
                    "订单号": "order_num",
                    "订单状态": "statename"
                }
            }
        },
        created(){

            this.init();
        },
        props: {
            liveId: {
                type: String,
                default: ''
            },
            live_user_id: {
                type: String,
                default: ''
            },
            fliter: {
                type: String,
                default: ''
            },

        },
        methods: {
            resetForm(formName) {
                this.input = '';
                this.state = '';
                this.init();
            },
            init(){
                let _param = {
                    input:this.input,
                    state:this.state,
                    liveId:this.$props.liveId,
                    fliter:this.$props.fliter,
                    user_id:this.$props.live_user_id,
                    pageSize:this.pageSize,
                    pageNumber:this.pageNumber
                };

                getpayorder(_param).then((res) => {
                    if (res.code == 200) {
                        this.tableData = res.data.list;
                        this.total = res.data.total;
                    } else {
                        this.msgError(res.msg);
                    }
                })
                
                let _param1 = {
                    input:this.input,
                    state:this.state,
                    liveId:this.$props.liveId,
                    fliter:this.$props.fliter,
                    user_id:this.$props.live_user_id,
                    pageSize:9999999999,
                    pageNumber:this.pageNumber
                };

                getpayorder(_param1).then((res) => {
                    if (res.code == 200) {
                        this.tableData1 = res.data.list;
                        this.total = res.data.total;
                    } else {
                        this.msgError(res.msg);
                    }
                })


            },
            handleSizeChange(e) {
                console.log(e);
                this.pageSize = e;
                this.init();
            },
            handleCurrentChange(e) {
                console.log(e);
                this.pageNumber = e;
                this.init();
            },
            search(e){
                this.init();
            },
            statechange(e){
                this.init();
            },
            
        }
        
    }

</script>


<style>

.shaixuan{
    width: 100%;
}

.yixuan {
    margin: 20px;
    color: #787878;
}

.first_table{
    margin-top: 20px;
}
</style>